<template>
  <el-form
    ref="formRef"
    v-loading="formLoading"
    :model="formData"
    :rules="formRules"
    label-width="120px"
  >
    <el-row>
      <el-col :span="4">
        <div class="flex items-center justify-center">
          <UploadImg v-model="formData.bareheaded" :disabled="false" width="56px" height="85px">
            <template #tip>
              <el-text>请上传2寸免冠照</el-text>
            </template>
          </UploadImg>
        </div>
      </el-col>
      <el-col :span="20">
        <el-row>
          <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="户口所在地" prop="houseCity">
              <el-cascader
                v-model="formData.houseCity"
                :options="areaList"
                :props="defaultProps"
                class="w-1/1"
                clearable
                filterable
                placeholder="请选择城市"
              />
            </el-form-item>
          </el-col>

          <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="地址" prop="houseAddress">
              <el-input v-model="formData.houseAddress" />
            </el-form-item>
          </el-col>

          <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="现居地" prop="liveCity">
              <el-cascader
                v-model="formData.liveCity"
                :options="areaList"
                :props="defaultProps"
                class="w-1/1"
                clearable
                filterable
                placeholder="请选择城市"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="地址" prop="liveAddress">
              <el-input v-model="formData.liveAddress" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </el-form>
</template>
<script lang="ts" setup>
import * as UserApi from '@/api/system/user'
import { defaultProps } from '@/utils/tree'
import * as AreaApi from '@/api/system/area'

import { FormRules } from 'element-plus'
import { copyValueToTarget } from '@/utils'
import { propTypes } from '@/utils/propTypes'

defineOptions({ name: 'SystemResidentForm' })
const props = defineProps({
  propFormData: {
    type: Object as PropType<UserApi.UserVO>,
    default: () => {}
  },
  activeName: propTypes.string.def('resident')
})

const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const message = useMessage() // 消息弹窗
const areaList = ref([]) // 地区列表

const formData = reactive({
  bareheaded: '',
  houseCity: '', //户口所在地
  houseAddress: '', //户口所在地地址
  liveCity: '', //现居地
  liveAddress: '' //现居地地址
})
const formRules = reactive<FormRules>({})
const formRef = ref() // 表单 Ref
onMounted(async () => {
  areaList.value = await AreaApi.getAreaTree()
})
/** 将传进来的值赋值给 formData */
watch(
  () => props.propFormData,
  (data) => {
    if (!data) {
      return
    }
    copyValueToTarget(formData, data)
  },
  {
    immediate: true
  }
)
/** 表单校验 */
const emit = defineEmits(['update:activeName'])
const validate = async () => {
  if (!formRef) return
  try {
    await unref(formRef)?.validate()
    // 校验通过更新数据
    Object.assign(props.propFormData, formData)
  } catch (e) {
    message.error('【户籍信息】不完善，请填写相关信息')
    emit('update:activeName', 'resident')
    throw e // 目的截断之后的校验
  }
}
defineExpose({ validate })
</script>
